<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">

			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">

	/*$(()=>{
		$("#pageId").load("doPageUI",function (){
			doGetObjects();
		});
	})*/
	$(()=>{
		$("#pageId").load("doPageUI",doGetObjects);
		//查询按钮事件注册
		$(".input-group-btn")
				.on("click",".btn-search",doQueryObjects)
		.on("click",".btn-delete",doDeleteObjects);
		//thead中全选checkbox的change事件注册及处理
		$("#checkAll").change(doChangeTbodyCheckboxState);
		//tbody中checkbox对象的change事件注册及处理
		//$(".cBox").change(doChangeTheadCheckBOXsTate);//有问题（页面加载完成cbox元素还不存在）
		$("#tbodyId").on("change",".cBox",doChangeTheadCheckboxState);
	});
	//基于tbody中的checkbox对象状态修改thead中CheckBox对象状态
	function doChangeTheadCheckboxState(){
		//1.对tbody中checkbox对象的checked属性值进行逻辑与
		let flag=true;
		$("#tbodyId input:checkbox")
		.each(function (){
			flag=flag&&$(this).prop("checked")
		})
		//2.修改thead中CheckBox的值
		$("#checkAll").prop("checked",flag);
	}

	//基于全选CheckBox的状态修改tbody中CheckBox的状态
	function doChangeTbodyCheckboxState(){
		//1.获取全选CheckBox对象状态
		let flag=$(this).prop("checked");
		//2.修改tbody中checkbox对象状态
		$("#tbodyId input:checkbox")//获取tbody中类型为CheckBox的input元素
		.prop("checked",flag);//让类型为CheckBox的input元素中的checked属性的值为flag

	}

	//获取选中记录的id值
	function deGetCheckedIds(){
		//1.定义一个用于存储id值的数组
		let idArray=[];//new Array();
		//2.将选中记录的CheckBox的value属性值存储到数组
		$("#tbodyId input:checkbox:checked")//获取tbody中类型CheckBox，并且是选中状态的input对象
		.each(function(){//each用于迭代这些input元素，每发现一个就会执行这个function(){}函数
			idArray.push($(this).val());//$(this)指向的是input对象，val()表示获取value属性值
		})
		//3.返回数组
		return idArray;
	}

	//删除事件处理函数
	function doDeleteObjects(){
		//debugger
		//1.获取选中的日志记录id并校验
		let idArrays=deGetCheckedIds();
		//2.给出删除提示(你确定删除吗)
		if(!confirm("您确定删除吗"))return;//js中window对象内部的一个函数
		//3.发送异步请求执行删除操作
		const url=`log/doDeleteObjects/${idArrays.toString()}`;
		//let params={"ids":idArrays.toString()};
		//$.post(url,params,function (result){
		// 	$.post(url,function (result){
		// 	if(result.state==123){
		// 		alert(result.message);
		// 		//doGetObjects();//重新执行查询进行刷新(查询那一页是应该有条件的)
		// 		doRefreshAfterDeleteOk();
		// 	}else {
		// 		alert(result.message);
		// 	}
		// })
		let ajax=$.ajax({
			type:"delete",//请求方法为delete方式
			url:url,
        });
		ajax.done(function (result){//success
				if (result.state==123){
					alert(result.message);
					doRefreshAfterDeleteOk();
				}else{
					alert(result.message);
				}
			})
	}
	function doRefreshAfterDeleteOk(){
		//1.获取当前页码值，总页数，全选状态
		let pageCurrent=$("#pageId").data("pageCurrent");
		let pageCount=$("#pageId").data("pageCount");
		let state=$("#checkAll").prop("checked");
		//2.基于条件修改当前页码值
		if(state&&pageCurrent>1&&pageCurrent==pageCount){
			pageCurrent--;
			$("#pageId").data("pageCurrent",pageCurrent);
		}
		//3.重新执行查询
		doGetObjects();
	}

	function doQueryObjects(){
		//1.初始化页码值
		$("#pageId").data("pageCurrent",1);
		//2.执行查询操作
		doGetObjects();
	}


	//向服务端发送异步请求查询用户行为日志信息，并将信息更新到页面上
	function doGetObjects(){
		$("#checkAll").prop("checked",false);
		//1.request url
		const url="log/doFindPageObjects";
		//2.request params
		//let params="pageCurrent=1";
		let pageCurrent=$("#pageId").data("pageCurrent");
		let username=$("#searchNameId").val();//.val()获取页面上输入的用户名
		//if(!pageCurrent)pageCurrent=1;
		let params={"pageCurrent":pageCurrent?pageCurrent:1,"username":username};
		//3.send ajax get request
		/*$.getJSON(url,params,function (result){
			doHandleResponseResult(result);
		})*/

		$.getJSON(url,params, doHandleResponseResult);
	}
	//处理日志查询结果
	function doHandleResponseResult(result){//server->JsonResult->json string->client->js object
		debugger
		//console.log("server.jsonresult",result);
		if(result.state==123){//state=1表示服务端响应的是正常数据
			//1)tbody位置呈现当前页的日志记录信息
			doSetTableBodyRows(result.data.records);
			//2）pageId位置呈现日志分析信息（总记录数，总页数，当前页码值）
			/*$(".rowCount").html(`总记录数DDDD(${result.data.rowCount})`);
			$(".pageCount").html(`总页数(${result.data.pageCount})`);
			$(".pageCurrent").html(`当前页(${result.data.pageCurrent})`);*/
			doSetPagination(result.data)
		}else {//state！=1表示服务端响应的是异常信息
			//1）方法1：alert错误信息
			//alert(result.message);
			//2) 方法2：tbody位置插入错误信息
			doSeTableBodyErrors(result.message);
		}
	}
	//处理查询失败的情况
	function doSeTableBodyErrors(msg){
		$("#tbodyId").html(`<tr><td colspan="7">${msg}</td></tr>`);
		let page={rowCount:0,pageCurrent: 1,pageCount: 0};
		doSetPagination(page);
	}
	//在tbody位置呈现当前页记录
	function doSetTableBodyRows(records){
		//1.获取tbody对象，并清空原有内容
		let tBody=$("#tbodyId");
		tBody.empty();
		//2.迭代日志记录，并将记录呈现在tbody位置
		records.forEach(item=>{
			tBody.append(doCreateRow(item));
		})
	}
	//创建行对象，呈现当前记录
	function doCreateRow(item){

		return `<tr>
				<td><input type="checkbox" class="cBox" value="${item.id}"></td>
				<td>${item.username}</td>
				<td>${item.operation}</td>
				<td>${item.method}</td>
				<td>${item.params}</td>
				<td>${item.ip}</td>
				<td>${item.time}</td>
				</tr>`;
	}

</script>






